<template>
	<div class="dayDown">
		<div class="dayDown-nav">
			<span>日交易对账单下载</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>首页</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/transaction' }">交易管理</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ path: '/home/transaction/dayDown' }">日交易对账单下载</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<hr>
		<div class="dayDown-date">
			<div class="dayDown-filter">
				<span>选择日期下载日交易对账单：</span>
				<el-select v-model="value1" placeholder="请选择年份">
					<el-option v-for="(item,index) in year" :key="index" :value="item">
					</el-option>
				</el-select>
				<el-select v-model="value2" placeholder="请选择月份" style="margin-left: 30px;">
					<el-option v-for="(item,index) in month" :key="index" :value="item">
					</el-option>
				</el-select>
				<el-input v-model="value3" placeholder="请输入天数" style="width: 210px;margin-left: 30px;"></el-input>
			</div>
			<div class="dayDown-calendar">
				<el-calendar v-model="calendar">
				</el-calendar>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				// select框的option值
				year:[2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016,
					2017, 2018, 2019, 2020, 2021
				],
				month:[1,2,3,4,5,6,7,8,9,10,11,12],
				// select的默认值
				value1: '',
				value2:'',
				value3:'1',
				// 存放getDate
				calendar: '',
			}
		},
		watch:{
			// 监听select框的值  发生变化就调用methods里面的getDate方法
			value1:'getDate',
			value2:'getDate',
			value3:'getDate'
		},
		methods:{
			// 获取日期
			getDate(){
				// 如果select框的值为空 就new Date()
				if(this.value1==''&&this.value2==''){
					this.calendar=new Date();
				}else{
					// 否则新建一个new Date() 日期用select框里面的值
					this.calendar=new Date(this.value1,this.value2-1,this.value3)
				}
			},
		},
	}
</script>

<style scoped="scoped">
	.dayDown {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		min-width: 1000px;
		overflow: hidden;
		font-size: 16px;
		color: #333;
	}

	.dayDown .dayDown-nav {
		width: 97%;
		height: 20px;
		line-height: 20px;
		margin: 25px auto;
	}

	.dayDown-nav>span {
		display: block;
		width: 200px;
		height: 100%;
		float: left;
		font-size: 17px;
		color: #333;
		padding-left: 8px;
		border-left: 1px solid #0075d2;
	}

	.dayDown-nav .el-breadcrumb {
		float: right;
	}

	.dayDown hr {
		margin: 0 auto 25px;
		width: 96%;
		border: none;
		border-bottom: 1px solid #ddd;
		height: 0;
	}
	.dayDown .dayDown-date{
		width: 97%;
		height: 100%;
		margin: 0 auto;
	}
	.dayDown-date .dayDown-filter>span{
		display: inline-block;
		font-size: 13px;
		margin-right: 10px;
	}
</style>
<style>
	.dayDown-calendar{
		width: 100%;
		border: 1px solid  #e1e1e1;
		margin-top: 30px;
	}
	.dayDown-calendar .el-calendar__header .el-calendar__button-group{
		display: none;
	}
	.dayDown-calendar .el-calendar__body thead{
		width: 100%;
		background-color: #f5f6fa!important;
	}
	.dayDown-calendar .el-calendar__body thead th{
		height: 40px !important;
		padding: 0 !important;
	}
	.dayDown-calendar .el-calendar__body tbody{
		box-sizing: content-box;
		padding-top: 20px !important;
	}
	.dayDown-calendar .el-calendar__body tbody tr{
		border: none;
	}
	.dayDown-calendar .el-calendar__body tbody tr td{
		background-color:#f4f4f4 !important;
	}
	.dayDown-calendar .el-calendar__body tbody tr td .el-calendar-day{
		height: 35px!important;
		text-align: center;
		border: none;
		padding: 0;
		line-height: 35px;
	}
	.dayDown-calendar .el-calendar__body tbody tr td .el-calendar-day:hover{
		background-color: #e5e5e5 !important;
	}
	.dayDown-calendar .el-calendar__body tbody tr td.is-selected{
		background-color:#e5e5e5 !important;
		color: #ff557f !important;
	}
</style>